<template>
  <div class="contain">
    <div class="header">
      <el-button type="primary" @click="$router.push('/houseEdit')"  v-if="identify == 0">新增单个房源</el-button>
      <el-button type="primary" @click="$router.push('/houseEditMore')"  v-if="identify == 0">新增集中房源</el-button>
      <!--<span class="export-span" v-if = "multipleSelection.length != 0">-->
          <form :action="url" method="get">
              <el-button type="primary" native-type="submit">批量导出</el-button>
              <input type="hidden" name="roomNo"  :value="configList.param.roomNoLike" />
              <input type="hidden" name="pageSize"  :value="1000" />
              <input type="hidden" name="sessionId"  :value="sessionId" />
          </form>
      <!--</span>-->
      <!--<span class="export-span" v-else>-->
              <!--<el-button type="primary" @click="">批量导出</el-button>-->
          <!--&lt;!&ndash;<button class="export" type="submit" @click="check">批量导出</button>&ndash;&gt;-->
          <!--<input type="hidden" name="ids" :value="multipleSelection" />-->
      <!--</span>-->
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>小区：</span>
        <el-select  v-if="identify == 0" v-model="configList.param.gardenName" placeholder="请选择" @change="handleChangeArea">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.gardenName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <div class="input-item">
        <span>单元：</span>
        <el-select  v-if="identify == 0" v-model="configList.param.unitName" placeholder="请选择" @change="handleChangeUnit">
          <el-option
            v-for="item in unitList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.unitName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <div class="input-item">
        <span>楼栋：</span>
        <el-select v-if="identify == 0" v-model="configList.param.buildName" placeholder="请选择">
          <el-option
            v-for="item in buildList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.buildName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <div class="input-item">
        <span>房源状态：</span>
        <el-select filterable  v-model="configList.param.houseStatus" placeholder="请选择">
          <el-option
            v-for="item in houseStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="input-item">
        <el-button type="primary" @click="getList()">查询</el-button>
      </div>
    </div>

      <div class="table-content">
        <table-list ref="tableList" :tableConfig='configList' @selectTable="selectTable">
          <el-table-column
            slot="select"  align="center" label="全选"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column min-width="120px"  align="center">
          </el-table-column>
          <!--<el-table-column slot="content"  align="center" label="公告内容">-->
          <!--<template slot-scope="scope">-->
          <!--<div v-html="scope.row.mobile">{{scope.row.content}}</div>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column class="btn"  min-width="240px" label="操作" slot="btn" align="center" fixed="right">
            <template slot-scope="scope">
              <div class="flex-box-container">
                <el-button  @click="$router.push('/houseDetail?id='+scope.row.id)" type="primary" size="small">查看</el-button>
                <el-button  @click="$router.push('/rentEdit?id='+scope.row.id)" type="primary" size="small" v-if="identify==0 && scope.row.houseStatus == 'unrent'">出租</el-button>
                <el-button  @click="$router.push('/houseEdit?id='+scope.row.id)" type="primary" size="small" v-if="identify==0">编辑</el-button>
                <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)" v-if="identify==0">删除</el-button>
              </div>

              <!--<el-button  @click="handleQuit(scope.row.id)" type="primary" size="small" v-else-if="identify==0 && scope.row.houseStatus == 'rented'">退租</el-button>-->
            </template>
          </el-table-column>
        </table-list>
      </div>
    <!--</div>-->
    <el-dialog
      title="设置水电费"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-form :model="readouts" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="水费" prop="waterReadouts">
            <el-input v-model.number="readouts.waterReadouts" placeholder="请输入水费"></el-input>
          </el-form-item>
          <el-form-item label="电费" prop="electricReadouts">
            <el-input v-model.number="readouts.electricReadouts" placeholder="请输入电费"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleClose" style="color: #fff">取 消</el-button>
            <el-button type="primary" @click="handleSureReadouts('ruleForm')">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default{
    data(){
      return {
        url: "",
        sessionId: '',
        ids: [],
        multipleSelection: [],
        buildingList: [{
          label: "全部",
          value: null
        }],
        unitList: [{
          label: "全部",
          value: null
        }],
        buildList: [{
          label: "全部",
          value: null
        }],
        houseStatusList: [{
          label: "全部",
          value: null
        },{
          label: "已出租",
          value: "rented"
        },{
          label: "未出租",
          value: "unrent"
        }],
        configList:{
          url:"",
          configList:[
            {
              slot: "select"
            },
            {
              label:'小区',
              prop:'gardenName',
            },
            {
              label:'单元',
              prop:'unitName',
            },
            {
              label:'楼栋',
              prop:'buildName',
            },
            {
              label:'房间',
              prop:'roomNo',
            },
            {
              label:'房租',
              prop:'rentalRentprice',
            },
            {
              label:'户型',
              prop:'roomType',
            },
            {
              label:'房源状态',
              prop:'houseStatusText',
            },
            {
              label:'房东',
              prop:'landlordName',
            },
            {
              slot:'btn'
            }
          ],
          param:{
            roomNo: "",
            buildName: "",
            gardenName: "",
            unitName: "",
            houseStatus: ""
          },
          type:'',
          width:'',
          isPagination:true
        },
        page: 1,
        pageSize: 10,
        count: null,
        buildingList: [],
        unitList: [],
        buildList: [],
        addAreaFlag: false,
        areaItemFlag: false,
        unitItemFlag: false,
        activeAreaId: "",
        activeUnitId: "",
        activeBuildId: "",
        addUnitFlag: false,
        addBuildFlag: false,
        name: "",
        unitName: "",
        buildName: "",
        defaultProps: {
          label: "name",
          children: ""
        },
        list: [],

        identify: "",
        backParams: {
          id: "",
          type: ""
        },
        dialogVisible1: false,
        readouts: {
          waterReadouts: "",
          electricReadouts: ""
        },
        rules: {
          waterReadouts: [
            {required: true, message: '请输入水费', trigger: 'blur'},
            {type: 'number', message: '水费必须为数字值'}
          ],
          electricReadouts: [
            {required: true, message: '请输入电费', trigger: 'blur'},
            {type: 'number', message: '电费必须为数字值'}
          ]
        }
      }
    },
    components: {
      'table-list':() => import('../common/my-table')
    },
    created() {
      this.identify = sessionStorage.getItem("identify");
      if (this.identify == 1) {
        this.configList.url = CONSTANT.URL.HOUSE.LIST
      } else {
        this.configList.url = CONSTANT.URL.L_HOUSE.LIST
      }
    },
    mounted() {
      this.sessionId = sessionStorage.getItem('sessionId');
      this.url = this.identify == 0 ? CONSTANT.URL.L_HOUSE.EXPORT : CONSTANT.URL.HOUSE.EXPORT
      if (this.identify == 0) {
        this.getGardenList()
      }
    },
    methods: {
      handleClose(done) {
        this.dialogVisible1 = false
        this.readouts = {
          waterReadouts: "",
          electricReadouts: ""
        }
      },
      selectTable(val) {
        this.ids = []
        this.multipleSelection = []
        val.map( item => {
          this.ids.push(item.id)
          this.multipleSelection.push(item.id)
        })
      },
      delLevel(id){
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let  url = CONSTANT.URL.L_HOUSE.DELETE;
          let data = {id:id} ;
          common.requestAjax(url,data,null,(res)=>{
            if(res.status == 200){
              this.$message({
                type:'success',
                message:'删除成功!'
              });
              this.getList();
            }
            else{
              this.$message({
                type:'warning',
                message:res.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
      delItem(id, callback = null) {
        let url = this.identify == 1 ? CONSTANT.URL.BUILDING.DELETE : CONSTANT.URL.L_BUILDING.DELETE,
          params = {
            id: id
          }
          common.requestAjax(url, {}, params, (data) => {
            if (data.status == 200) {
              this.$message({
                type: "success",
                message: data.msg
              })
              callback && callback()
            }
            if (data.status == 500) {
              this.$message({
                type: "warning",
                message: data.msg
              })
            }
          })
      },

      getList(){
        this.$refs.tableList.getList()
      },
      selectTable() {

      },
      getGardenList() {
        let url = this.identify == 1 ? '' : CONSTANT.URL.L_HOUSE.L_GARDEN;
        common.requestAjax(url, {}, {}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildingList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getUnitList() {
        let url = CONSTANT.URL.L_HOUSE.L_UNIT;
        this.unitList = []
        common.requestAjax(url, {}, {gardenName: this.configList.param.gardenName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.unitList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getBuildingList() {
        let url = CONSTANT.URL.L_HOUSE.L_BUILD;
        this.buildList = []
        common.requestAjax(url, {}, {unitName: this.configList.param.unitName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      handleChangeArea() {
        this.configList.param.unitName = "";
        this.configList.param.buildName = "";
        this.getUnitList()
      },
      handleChangeUnit() {
        this.configList.param.buildName = "";
        this.getBuildingList()
      },
      handleQuit(id) {
        let url = CONSTANT.URL.L_RENTALBACK.CREATEHOUSE
        common.requestAjax(url, {}, {houseId: id}, (res) => {
          if (res.status == 200) {
            this.backParams = {
              id: res.data.bussData.split(",")[0],
              type: res.data.bussData.split(",")[1]
            }
//            if (this.backParams.type == "day_rental") {
              this.$router.push("/rentalbackDetail?id="+this.backParams.id+"&type="+this.backParams.type+"&confirm=1"+"&from=houseList")
//            } else {
//              this.dialogVisible1 = true
//            }
          }
          if(res.status == 500) {
            this.$message({
              type: "warning",
              message: res.msg
            })
          }
        })
      },

      handleSureReadouts(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = CONSTANT.URL.L_RENTALBACK.READOUTS;
            let params = Object.assign({id: this.backParams.id}, this.readouts)
            common.requestAjax(url, {}, params, (data) => {
              if (data.status == 200) {
                this.$message({
                  type: "success",
                  message: data.msg
                })
                this.dialogVisible1 = false
                this.readouts = {
                  waterReadouts: "",
                  electricReadouts: ""
                }
                this.$router.push("/rentalbackDetail?id="+this.backParams.id+"&type="+this.backParams.type+"&confirm=1"+"&from=houseList")
              }
              if (data.status == 500) {
                this.$message({
                  type: "warning",
                  message: data.msg
                })
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


    }
  }
</script>

<style lang="scss">
  .house-tree {
    position: relative;
    background-color: #fff;
    margin-top: 20px;
    margin-right: 10px;
    .btn-add {
      /*border: 1px solid #d0d0d0;*/
      /*padding: 5px 10px;*/
      margin-left: -20px;
      border-radius: 5px;
    }
    .el-input {
      font-size: 12px;
      width: 60%;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
      }
    }
    .unit-add, .build-add, .child-add {
      margin-left: 10px;
      display: none;
      font-size: 12px;

    }
    ul,li {
      list-style: none;
    }
    li {
      padding: 10px
    }
    li.area-item {
      -webkit-user-select: none;
      user-select: none;
      &:hover {
        background-color: #f5f5f5;
        color: #333;
        .unit-add {
          display: inline-block;
        }
      }
    }
    li.unit-item {
      &:hover {
        background-color: #f5f5f5;
        color: #333;
        .build-add {
          display: inline-block;
        }
      }
    }
    li.build-item {
      &:hover {
        background-color: #f5f5f5;
        color: #333;
        .child-add {
          display: inline-block;
        }
      }
    }
    .el-tree {
      padding-top: 10px;
      .el-tree-node__content {
        padding: 12px 0;
      }
    }
    .block {
      background-color: #fff;
      position: absolute;
      bottom: 10px;

    }
  }
  .contain {
    .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
    .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{
        width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
        li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
        li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
          .sort_name{ font-weight: 600;margin-bottom: 5px;}
          .group-list{ padding-left: 20px;
            .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
          }
        }
      }
      .el-button--default{background-color: #fff !important;}
    }
  }
</style>
